<template>
  <div class="home" :style="style">
    <div class="home_read" v-if="MainStore.state.type == 'read' || MainStore.state.type == 'edit'">
      <view_note/>
    </div>
    <div class="home_edit" v-if="MainStore.state.type == 'plan' || MainStore.state.type == 'edit'">
      <edit_note/>
    </div>
    <div class="home_plan" v-if="MainStore.state.type == 'plan'">
      计划
    </div>
  </div>
</template>

<script lang="ts" setup>
import view_note from '@/components/view_note.vue';
import edit_note from "@/components/edit_note.vue"
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref, onMounted, watch } from 'vue'
import { useMainStore } from "@/store/index";
const MainStore = useMainStore();
const style = ref('')
MainStore.state.open = true;


watch(MainStore.state, async (newVal, oldVal) => {
  console.log(newVal.type, '变了')
  if (newVal.type == 'read') {
    style.value = 'justify-content: center;'
  } else {
    style.value = 'justify-content:space-around'
  }
})
onBeforeRouteLeave((to, from) => {
  if (to.path != '/') {
    MainStore.state.open = false;
  }
})
</script>

<style>
.home {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  padding: 5px;
  display: flex;
  justify-content: center;
  >.home_read {
    width: 100%;
    padding: 5px;
    overflow: auto;
    border: 1px solid rgb(211, 207, 207);
    margin:0px 10px;
    border-radius: 5px;
    /* box-shadow: rgba(60, 64, 67, 0.2) 0px 2px 6px 2px; */
  }

  >.home_edit {
    /* width: 30%; */
    width: 100%;
    border-radius: 5px;
    margin:0px 10px;
    border: 1px solid rgb(211, 207, 207);
    /* box-shadow: rgba(60, 64, 67, 0.2) 0px 2px 6px 2px; */

  }

  >.home_plan {
    /* width: 30%; */
    width: 400px;
    border-radius: 5px;
    border: 1px solid rgb(211, 207, 207);

    box-shadow: rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;
  }
}
</style>
